<template>
  <div ref="example" class="pb-[10px] bg-[#fff]"
       :class="{'h-full flex items-center justify-center':!componentList.length}">
    <template v-if="!isLoading">
      <Draggable
          itemKey="fe_id"
          :list="componentList"
          ghost-class="ghost"
          chosen-class="chosenClass"
          animation="200"
          @change="move"
          @start="start"
      >
        <template #item="{ element }">
          <div>
            <template v-if="element?.type==='questionInfo'&&!element.isHidden">
              <QuestionInfoItem :key="element.fe_id" :itemData="element"
                                :class="{'active':element.fe_id===activeId,'isLocked':element.isLocked}"
                                @click.native="changeId(element.fe_id)"></QuestionInfoItem>
            </template>
            <template v-if="element?.type==='questionTitle'&&!element.isHidden">
              <QuestionTitleItem :key="element.fe_id" :itemData="element"
                                 :class="{'active':element.fe_id===activeId,'isLocked':element.isLocked}"
                                 @click.native="changeId(element.fe_id)"></QuestionTitleItem>
            </template>
            <template v-if="element?.type==='questionInput'&&!element.isHidden">
              <QuestionInputItem :key="element.fe_id" :itemData="element"
                                 :class="{'active':element.fe_id===activeId,'isLocked':element.isLocked}"
                                 @click.native="changeId(element.fe_id)"></QuestionInputItem>
            </template>
            <template v-if="element?.type==='questionTextarea'&&!element.isHidden">
              <QuestionTextareaItem :key="element.fe_id" :itemData="element"
                                    :class="{'active':element.fe_id===activeId,'isLocked':element.isLocked}"
                                    @click.native="changeId(element.fe_id)"></QuestionTextareaItem>
            </template>
            <template v-if="element?.type==='questionParagraph'&&!element.isHidden">
              <QuestionParagraphItem :key="element.fe_id" :itemData="element"
                                     :class="{'active':element.fe_id===activeId,'isLocked':element.isLocked}"
                                     @click.native="changeId(element.fe_id)"></QuestionParagraphItem>
            </template>
            <template v-if="element?.type==='questionRadio'&&!element.isHidden">
              <QuestionRadioItem :key="element.fe_id" :itemData="element"
                                 :class="{'active':element.fe_id===activeId,'isLocked':element.isLocked}"
                                 @click.native="changeId(element.fe_id)"></QuestionRadioItem>
            </template>
            <template v-if="element?.type==='questionCheckbox'&&!element.isHidden">
              <QuestionCheckboxItem :key="element.fe_id" :itemData="element"
                                    :class="{'active':element.fe_id===activeId,'isLocked':element.isLocked}"
                                    @click.native="changeId(element.fe_id)"></QuestionCheckboxItem>
            </template>
          </div>
        </template>
      </Draggable>
    </template>
    <template v-else>
      <a-spin/>
    </template>
  </div>
</template>

<script setup>
import {ref, watch} from 'vue'
import useQuestion from "../../store/question.js";
import {storeToRefs} from "pinia";

const questionStore = useQuestion()
const {componentList, activeId, isLoading, hiddenLength} = storeToRefs(questionStore)
import QuestionInfoItem from "./questionInfoItem.vue";
import QuestionTitleItem from './questionTitleItem.vue'
import QuestionInputItem from './questionInputItem.vue'
import QuestionTextareaItem from './questionTextareaItem.vue'
import QuestionParagraphItem from './questionParagraphItem.vue'
import QuestionRadioItem from './questionRadioItem.vue'
import QuestionCheckboxItem from './questionCheckboxItem.vue'
import Draggable from "vuedraggable";

const example = ref(null)
watch(() => componentList.value.length, (newVal) => {
  if (!newVal) {
    questionStore.changeEditKey('2')
  }
})
let preVal = ref([])
watch(() => hiddenLength.value, (newVal) => {
  if (!newVal) {
    questionStore.changeEditKey('2')
  }
})
const move = () => {
  questionStore.addSnapshots({
    type: 'sort',
    data: preVal.value
  })
}
const start = () => {
  preVal.value = JSON.parse(JSON.stringify(componentList.value))
}
const changeId = (id) => {
  if (id) {
    questionStore.changeEditKey('1')
    questionStore.changeId(id)
  }
}
</script>

<style scoped>
:deep(h1, h2, h3, h4, h5 ) {
  margin-bottom: 0 !important;
}

div {
  box-sizing: border-box;
}

.item {
  border: 1px solid #fff;
}

:deep(h1) {
  font-size: 24px !important;
}

.item:hover {
  border: 1px solid #d9d9d9;
}

.active {
  border: 1px solid #1890ff !important;
}

:deep(.ant-typography) {
  margin-bottom: 0 !important;
}
</style>
